<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid #000;
            box-shadow: 10px 10px 10px gray;
            width: 600px;
            margin: auto;
            margin-top: 150px;
        }
        .top{
            width: 600px;
            height: 60px;
            display: flex;
        }
        .name{
            width: 220px;
            font-size: 24px;
            font-weight: 500;
            padding-left: 20px;
            line-height: 50px;
        }
        .Tap{
            width: 380px;
        }
        ul{
            display: flex;
            justify-content: space-around;
            list-style: none;
        }
        li{
            cursor: pointer;
            font-weight: 500;
        }
        li:hover{
            color: red;
            font-weight: 700;
            text-decoration: underline red 2px;
        }
        .buttom{
            width: 600px;
            height: 280px;
        }
        img{
            width: 600px;
            height: 280px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <div class="name">吴 佳 琪</div>
            <div class="Tap">
                <ul>
                    <li class="l1">精选</li>
                    <li class="l2">美食</li>
                    <li class="l3">百货</li>
                    <li class="l4">个护</li>
                    <li class="l5">预告</li>
                </ul>
            </div>
        </div>
        <div class="buttom">
            <img src="../images/渲染列表图片/course01.png" alt="">
        </div>
    </div>

    <script>
        const image=document.querySelector('img')
            const li=document.querySelectorAll(`li`)
            for(let i=0;i<=4;i++){
                li[i].addEventListener('mouseover',function(){
                image.src=`../images/渲染列表图片/course0${i+1}.png`
            })
            }           
            // li[0].addEventListener('mouseover',function(){
            //     image.src=`../images/渲染列表图片/course01.png`
            // })
            // li[1].addEventListener('mouseover',function(){
            //     image.src=`../images/渲染列表图片/course02.png`
            // })
            // li[2].addEventListener('mouseover',function(){
            //     image.src=`../images/渲染列表图片/course03.png`
            // })
            // li[3].addEventListener('mouseover',function(){
            //     image.src=`../images/渲染列表图片/course04.png`
            // })
            // li[4].addEventListener('mouseover',function(){
            //     image.src=`../images/渲染列表图片/course05.png`
            // })
    </script>
</body>
</html>